@import 'reset';
@import 'colors';
@import 'fonts';
@import 'mixins';

body {
    font:20px 'Roboto Condensed', Arial;
    color:$grey;

    .left {
        float:left;
    }

    a {
        text-decoration:underline;
        color:$blueLight;
    }

    p {
        margin-bottom:10px
    }

    #flash-message {
        position:fixed;
        left:0;
        top:0;
        text-align: center;
        width:100%;

        >div {
            display:inline-block;
            width:auto;
            padding:5px 10px;
            @include box-shadow(0, 0, 3px, black);
            @include border-radius(0, 0, 3px, 3px);
        }

        .info {
            background: $orangeLight;
            color:$grey;
        }
        .error {
            @include vertical-gradient($redLight, $redDark);
            color:white;
        }
        .ok {
            @include vertical-gradient($greenLight, $greenDark);
            color:white;
        }
    }

    header {
        background:$grey;
        color:white;
        padding:20px 20px 0;

        #logo { float:left }
        h1 {
            font-size:24px;
            line-height:46px;
            float:left;
            margin:0 20px 0 5px
        }

        a {
            text-decoration:none;
            color:white
        }

        menu {
            list-style:none;
            line-height: auto;
            margin-left:20px;
            
            li {
                float:left;
                text-transform: uppercase;
                padding-bottom:20px;

                a {
                    display:block;
                    padding:10px 20px
                }
                a:hover {
                    background-color:rgba(255,255,255,0.5);
                    color:$greyDark;
                }
            }
            li.active a {
                background-color:white;
                color:$greyDark
            }
            li:first-child{ margin-left:20px}
            li:last-child {
                float:right;
                padding:0
            }
        }
    }

    #main {
        padding:20px;

        menu {
            margin-right:30px;
            list-style:none;
            width:150px;

            li {
                border-bottom:1px dotted $greyLight;
                float:left;
                width:100%;

                a {
                    text-decoration:none;
                    display:block;
                    float:left;
                    width:90%
                }
                .handle {
                    display:block;
                    float:left;
                    width:10%;
                    height:100%;
                    cursor:move;
                    background:url(../img/handle.png) no-repeat 4px center;
                }
            }
            li.util{
                border:none;
                font-size:0.8em;
                float: left;

                a {
                    color:$grey;
                    width:80%;
                }
            }
            li.util:hover {
                background-color:$blueLight;

                a {
                    color:white;
                }
            }
            li.util:before {
                content: " ";
                display:block;
                float:left;
                width:24px;
                height:24px;
                background-image:url(../img/admin-icons.png);
                background-repeat: no-repeat;
                background-position:0 0;
            }
            li.new { margin-top:16px }
            li.order { display:none }
            li.basket {display:none}
                li.basket.loading {display:block}
                li.basket.loading:before{background:url(../img/loading.gif) no-repeat center center}
                li.basket:hover {background-color:transparent}
            li.basket.ui-droppable-hover {background-color:$blueLight;color:white}

            li.new:before { background-position:0 0 }
                li.new:hover:before { background-position:0 -24px }
            li.order:before { background-position:-24px 0 }
                li.order:hover:before { background-position:-24px -24px }
            li.basket:before { background-position:-48px 0 }
            li.basket.ui-droppable-hover:before{ background-position: -48px -24px }

            li.ui-sortable-helper {
                background:white;
                border:1px solid $greyLight;
                @include box-shadow(0, 0, 3px, $greyLight)
            }
            li.ui-sortable-placeholder {
                background:$blueLight;
                border-color:$blueLight
            }
        }
        menu.reordered {
            .order {
                display:block
            }
        }

        form {
            float:left;

            label {
                display:block;
                margin:10px 0 0;
                cursor:pointer
            }

            input,textarea,select {
                padding:2px;
                font:12px Arial;
            }
            input, textarea {
                width:300px
            }

            input[type=radio],input[type=checkbox] {
                width:auto;
                cursor:pointer
            }
            input[type=button] {
                @extend input[type=radio];
                @include vertical-gradient($greyLight, $grey);
                padding:4px 8px;
                border:none
            }
            input[type=submit] {
                @extend input[type=button];
                @include vertical-gradient($blueLight, $blueDark);
                color:white;
                float:right;
                clear:both;
            }
            input.delete {
                @include vertical-gradient($redLight, $redDark);
                color:white
            }
        }

        form.settings {
            width:800px;

            .setting-item {
                float:left;
                width:50%;
                height:70px;
            }
            .setting-item.background {
                height:140px;

                img {
                    height:70px
                }
            }
        }

        .image-list {
            list-style:none;
            float:left;
            width:100%;

            li {
                float:left;
                height:150px;
                overflow: hidden;
                margin:0 10px 10px 0;
                position:relative;

                .action {
                    position: absolute;
                    right:2px;
                    top:2px;
                    width:16px;
                    height:16px;
                    font:bolder 12px/16px Arial;
                    text-decoration:none;
                    text-align:center;
                    @include box-shadow(0, 0, 2px, $grey);
                }
                .delete {
                    background:white;
                    color:$grey;
                }
                .delete:hover {
                    background:$redLight;
                    color:white;
                }
                .delete-cache {
                    right:22px;
                    background:url(../img/clear-cache.png) no-repeat center center;
                    @include box-shadow(0,0,0,transparent);
                }
            }
            li:last-child{margin-right:0}

            li.add {
                width:150px;
                height:150px;
                text-align:center;
                background:$greyLight;
                color:$grey;

                form {
                    width:100%;

                    a {
                        display:block;
                        line-height: 150px;
                        text-decoration:none;
                        color:white;
                    }
                    a:hover {
                        background:$blueLight;
                    }

                    input {
                        position:absolute;
                        opacity:0;
                        cursor:pointer;
                        height:150px;
                        width:150px;
                        left:0;
                        top:0;
                    }

                    .info {
                        position:absolute;
                        font-size:0.6em;
                        right:5px;
                        bottom:5px;
                    }
                }
            }
        }
    }
    .gallery-image-list{
        li {
            padding:4px;
            background:white;
            cursor:pointer;

            img {
                float:left;
                display:block
            }
        }
        li.selected {
            background:$blueLight;
            color:white;
        }
    }
}

@media screen and(max-width:800px) {
    body {
        .left {
            float:none;
        }

        header {
            menu {
                li {

                    a {
                        width:48px;
                        height:48px;
                        text-indent: -100em;
                        overflow:hidden;
                        background-image:    url(../img/admin-menu-icons.png);
                        background-repeat:   no-repeat;
                        background-position: 0 0;
                        padding:0
                    }
                    a:hover {
                        background-color:transparent;
                    }
                }
                li.active a {
                    background-color:transparent;
                }

                li:nth-child(1) a {background-position:0 0}
                li:nth-child(2) a {background-position:-48px 0}
                li:last-child   a {background-position:-96px 0}

                li:nth-child(1) a:hover {background-position:0 -48px}
                li:nth-child(2) a:hover {background-position:-48px -48px}
                li:last-child   a:hover {background-position:-96px -48px}
                
                li.active:nth-child(1) a {background-position:0 -48px}
                li.active:nth-child(2) a {background-position:-48px -48px}
                li.active:last-child   a {background-position:-96px -48px}
            }
        }

        form {
            input[type=text],textarea {
                width:100%
            }
        }

        form.clear {
            clear:both;
            margin-top:20px;
            border-top:1px solid #ccc;
            padding-top:20px;
        }

        form.settings {
            width:100%
        }

        #main {
            menu {
                width:100%;

                li {
                    width:200px;
                    float:left;
                    margin-right:5px
                }
                li.util {
                    clear:both
                }
            }
        }
    }
}